<!--
 @description 新增/编辑 搭配套餐基本信息
 @fileName Edit.vue
 @author zengqiongying
 @created 2024/08/19 17:23:01
-->
<template>
  <div class="qup-full-page" style="padding:0">
    <inside-page :titles="['搭配套餐配置', isEdit?'编辑':'新增']" @go-back="goBack">
      <div class="c-container">
        <div class="qup-title-box">
          <span class="border" /><span>基础信息</span>
          <div class="title-btns">
            <template v-if="enableEdit">
              <el-button size="mini" type="primary" plain @click="handleCalceEdit">取消</el-button>
              <el-button size="mini" type="primary" @click="handleSaveBasic">保存</el-button>
            </template>
            <template v-else>
              <el-button size="mini" type="primary" @click="enableEdit = true">编辑</el-button>
            </template>
          </div>
        </div>
        <div>
          <el-form ref="form" :model="formData" :rules="formRules" size="mini" label-width="100px">
            <el-form-item label="搭配名称" prop="name">
              <template v-if="enableEdit">
                <el-input v-model="formData.name" placeholder="请输入套餐名称" maxlength="50" />
              </template>
              <template v-else>
                <div>{{ detail.name }}</div>
              </template>
            </el-form-item>
            <el-form-item label="显示方式" prop="showType">
              <template v-if="enableEdit">
                <el-select v-model="formData.showType">
                  <el-option value="SPU" label="SPU" />
                  <el-option value="SKU" label="SKU" />
                </el-select>
              </template>
              <template v-else>
                <div>{{ detail.showType }}</div>
              </template>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <template v-if="isEdit">
        <div class="qup-title-box">
          <span class="border" /><span>商品信息</span>
        </div>
        <div>
          <div><main-product :combine-id="combineId" :detail="mainProductDTO" @refresh="getDetailData" /></div>
          <div>
            <collocation-product :combine-id="combineId" :list="otherProductList" @refresh="getDetailData" />
          </div>
        </div>
        <div class="qup-title-box">
          <span class="border" /><span>效果图</span>
        </div>
        <div>
          <programme :combine-id="combineId" :detail="schemeDTO" @refresh="getDetailData" />
          <render-image :combine-id="combineId" :scheme-id="schemeId" :list="renderingList" @refresh="getDetailData" />
        </div>
      </template>
    </inside-page>
  </div>
</template>

<script>
import { queryDetail, saveCombinationBasic } from '@/api/productCombine/index'
import MainProduct from './ConfigProduct/MainProduct'
import CollocationProduct from './ConfigProduct/CollocationProduct'
import Programme from './ConfigProduct/Programme'
import RenderImage from './ConfigProduct/RenderImage'
export default {
  name: 'CombinPackageEdit',
  components: { MainProduct, CollocationProduct, Programme, RenderImage },
  props: {
    pageShow: {
      type: Boolean,
      default: false
    },
    detail: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      combineId: '', // 当前编辑搭配ID
      formData: {
        name: '',
        showType: '',
        enabled: 1
      },
      formRules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        showType: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      enableEdit: true,
      submiting: false,
      detailData: null
    }
  },
  computed: {
    nowPageShow: {
      get() {
        return this.pageShow
      },
      set(val) {
        this.$emit('update:pageShow', val)
      }
    },
    isEdit() {
      return !!(this.detail && this.detail.id) || !!(this.combineId)
    },
    // 主商品
    mainProductDTO() {
      if (this.detailData && this.detailData.productCombinationDetailDTOs) {
        const list = this.detailData.productCombinationDetailDTOs.filter(v => [1, '1'].includes(v.isMain))
        return list[0] || {}
      }
      return {}
    },
    // 搭配商品
    otherProductList() {
      if (this.detailData && this.detailData.productCombinationDetailDTOs) {
        const list = this.detailData.productCombinationDetailDTOs.filter(v => ![1, '1'].includes(v.isMain))
        return list
      }
      return []
    },
    // 方案
    schemeDTO() {
      if (this.detailData && this.detailData.productCombinationSchemeDTOs) {
        return this.detailData.productCombinationSchemeDTOs[0] || {}
      }
      return {}
    },
    schemeId() {
      return (this.schemeDTO && this.schemeDTO.schemeId) || ''
    },
    // 效果图
    renderingList() {
      const list = (this.detailData && this.detailData.productCombinationRenderingDTOs) || []
      return list.sort((a, b) => a.sort - b.sort)
    }
  },
  created() {
    if (this.detail && this.detail.id) {
      this.enableEdit = false
      this.initFormData(this.detail)
      this.getDetailData()
    }
  },
  methods: {
    goBack() {
      if (!this.enableEdit) {
        this.nowPageShow = false
        return
      }
      this.$confirm(`数据尚未保存,确定要返回吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.nowPageShow = false
      })
    },
    initFormData(data) {
      this.combineId = data.id || ''
      const enabled = [0, '0', 1, '1'].includes(data.enabled) ? Number(data.enabled) : 1
      const keys = Object.keys(this.formData)
      keys.forEach(k => {
        this.$set(this.formData, k, data[k] || '')
      })
      this.$set(this.formData, 'enabled', enabled)
    },
    getDetailData() {
      queryDetail(this.combineId).then(res => {
        this.detailData = res.data
      })
    },
    handleCalceEdit() {
      if (!this.isEdit) {
        this.goBack()
        return
      }
      this.enableEdit = false
      this.initFormData()
    },
    // 提交表单处理
    handleSaveBasic() {
      if (this.submiting) return
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const formData = Object.assign(this.formData)
          if (this.isEdit) {
            formData.id = this.combineId
          }
          this.submiting = true
          saveCombinationBasic(formData).then(res => {
            this.submiting = false
            if (res.success === 1) {
              this.enableEdit = false
              this.combineId = (this.detail && this.detail.id) || res.msg
              this.$message.success(`${this.isEdit ? '编辑' : '新增'}保存成功`)
              let data = {
                ...{ id: (this.detail && this.detail.id) || res.msg },
                ...formData
              }
              if (this.isEdit) {
                data = { ...this.detail, ...formData }
              }
              const result = {
                data,
                isNewCreate: !this.isEdit
              }
              if (!this.isEdit) {
                this.$set(this.formData, 'id', res.msg)
              }
              this.getDetailData()
              this.$emit('success', result)
            }
          }).catch(() => {
            this.submiting = false
          })
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.qup-title-box{
  padding-top: 10px;
  display: flex;
  align-items: center;
  .title-btns{
    margin-left: auto;
  }
}
</style>
